<template>
    <div>
        <el-row style="margin-top: 20px;">
  			<el-col :span="14" :offset="4">
	  			<header class="form_header">修改商品信息</header>
	  			<el-form :model="foodForm" :rules="foodrules" ref="foodForm" label-width="110px" class="form food_form">
            <el-form-item label="书籍id" prop="name">
              <el-input v-model="foodForm.bookid"></el-input>
            </el-form-item>
            <el-form-item label="书籍名称" prop="name">
						<el-input v-model="foodForm.name"></el-input>
					</el-form-item>
					<el-form-item label="书籍作者" prop="description">
						<el-input v-model="foodForm.author"></el-input>
					</el-form-item>
            <el-form-item label="类型" prop="description">
              <el-input v-model="foodForm.type"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="description">
              <el-input v-model="foodForm.stock"></el-input>
            </el-form-item>
            <el-form-item label="单价" prop="description">
              <el-input v-model="foodForm.unitPrice"></el-input>
            </el-form-item>
            <el-form-item label="书籍图片" prop="description">
            </el-form-item>
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="http://4n437650p0.qicp.vip:32196/bookOnShelves"
                        :data="foodForm"
                        name="picture"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :on-change="loadJsonFromFile"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>

					<el-form-item>
						<el-button type="primary" @click="addFood('foodForm')">确定修改信息</el-button>
					</el-form-item>
	  			</el-form>

  			</el-col>
  		</el-row>
    </div>
</template>

<script>


    export default {
    	data(){
    		return {
                uploadFiles: [],
    			restaurant_id: 1,
                pic:"",
    			categoryForm: {
    				categoryList: [],
    				categorySelect: '',
    				name: '',
    				description: '',
    			},
    			foodForm: {
    				name: '',
            author: '',
            type:'',
            unitPrice:'',
            stock:"",
            bookid:""
    			},
    			foodrules: {
    				bookid: [
						{ required: true, message: '请输入书籍id', trigger: 'blur' },
					],
    			},
    			attributes: [{
		          	value: '新',
		          	label: '新品'
		        }, {
		          	value: '招牌',
		          	label: '招牌'
		        },],
    			showAddCategory: false,
    			foodSpecs: 'one',
    			dialogFormVisible: false,
		        specsForm: {
		          	specs: '',
		          	packing_fee: 0,
		          	price: 20,
		        }
    		}
    	},

    	methods: {

            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file);
            },
			handleDelete(index){
				this.foodForm.specs.splice(index, 1);
			},

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            loadJsonFromFile(file, fileList) {
                this.uploadFiles = fileList

            },
		    addFood(foodForm){
		    	this.$refs[foodForm].validate(async (valid) => {
					if (valid) {
						try{
                             let file = this.uploadFiles[0];
                             var fd = new FormData()
                             fd.append('picture', file.raw)
                             fd.append('name',this.foodForm.name)
                             fd.append('author',this.foodForm.author)
                             fd.append('type',this.foodForm.type)
                             fd.append('stock',this.foodForm.stock)
                             fd.append('unitPrice',this.foodForm.unitPrice)
                             fd.append('tokenValue',this.$store.getters.getUser)
                             fd.append('bookId',this.foodForm.bookid)

                            let config = {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }
                            axios.post('http://myphoenixshop.cpolar.io/changeBookInfo',fd,config).then( res => {
                                console.log(res)
                            }).catch( res => {
                                console.log(res)
                            })
						}catch(err){
							console.log(err)
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
		    }
		}
    }
</script>

<style lang="less">
	@import '../style/mixin';
	.form{
		min-width: 400px;
		margin-bottom: 30px;
		&:hover{
			box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
			border-radius: 6px;
			transition: all 400ms;
		}
	}
	.food_form{
		border: 1px solid #eaeefb;
		padding: 10px 10px 0;
	}
	.form_header{
		text-align: center;
		margin-bottom: 10px;
	}
	.category_select{
		border: 1px solid #eaeefb;
		padding: 10px 30px 10px 10px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}
	.add_category_row{
		height: 0;
		overflow: hidden;
		transition: all 400ms;
		background: #f9fafc;
	}
	.showEdit{
		height: 185px;
	}
	.add_category{
		background: #f9fafc;
		padding: 10px 30px 0px 10px;
		border: 1px solid #eaeefb;
		border-top: none;
	}
	.add_category_button{
		text-align: center;
		line-height: 40px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border: 1px solid #eaeefb;
		border-top: none;
		transition: all 400ms;
		&:hover{
			background: #f9fafc;
			span, .edit_icon{
				color: #20a0ff;
			}
		}
		span{
			.sc(14px, #999);
			transition: all 400ms;
		}
		.edit_icon{
			color: #ccc;
			transition: all 400ms;
		}
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	    border-color: #20a0ff;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	}
	.avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	}
	.cell{
		text-align: center;
	}
</style>
